<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:insert="commen/head :: header">
    </div>
    <link rel="stylesheet" th:href="@{/css/reset.css}">

    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: rgb(242,244,247)">
    <div th:insert="commen/navigationBar :: topNavBar"></div>
    <div class="container-fluid" style="text-align: left">
        <div class="row">
            <div class="col-md-2" >
                <div style="text-align: center" th:insert="commen/navigationBar :: leafTeaNavBar"></div>
            </div>
            <div class="col-md-10" style="background-color: #ffffff; padding: 15px; border-radius: 15px">
                <div style="margin-left: 10px; margin-bottom: 5px;">
                    <div class="media">
                        <div class="media-left media-top">
                            <img th:if="${singIn.getSingInStatus() == 2}" th:src="@{../img/cantSingIn.jpg}" width="65" height="65" alt="">
                            <img th:if="${singIn.getSingInStatus() == 1}" th:src="@{../img/singedIn.jpg}" width="65" height="65" alt="">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading" th:text="${singIn.getSName()}"></h4>
                            <p>
                                <span th:text="${singIn.getAddTime()}" style="font-size: 14px; color:#7c7c7c;"></span><br>
                                <span th:if="${singIn.getSingInStatus() == 1}">进行中</span>
                                <span th:if="${singIn.getSingInStatus() == 2}">已结束</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div>
                    <ul id="myTab" class="nav nav-tabs">
                        <li>
                            <a href="#homework" data-toggle="tab" style="margin-left: 10px;margin-right: 10px; font-size: 18px; font-weight: bold;">
                                已签([[${singInStu}]])
                            </a>
                        </li>
                        <li>
                            <a href="#questionsBank" data-toggle="tab" style="font-size: 18px; font-weight: bold;" >
                                未签([[${notSingInStu}]])
                            </a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content" style="padding: 10px;">
                        <div class="tab-pane fade" id="homework">
                            <div class="col-md-12">
                                <div th:each="su : ${sus}" class="media" th:if="${su.getStuSingInStatus().toString() == '1'}">
                                    <div class="media-left media-top">
                                        <img th:src="@{'../img/' + ${su.getUser().getUserImg()}}" class="media-object" style="width:60px">
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading" th:text="${su.getUser().getUserName()}"></h4>
                                        <p style="font-size: 18px" th:text="${su.getSingInTime()}"></p>
                                        <span style="color: green; font-size: 18px">已签到</span>
                                    </div>
                                </div>
                                <div class="text-center" style="font-size: 24px; color:#7c7c7c; margin-top: 40px; margin-bottom: 40px;" th:if="${singInStu == 0}">
                                    当前暂无人签到!
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="questionsBank">
                            <div class="col-md-12">
                                <div th:each="su : ${sus}" class="media"  th:if="${su.getStuSingInStatus().toString() == '0'}">
                                    <div class="media-left media-top">
                                        <img th:src="@{'../img/' + ${su.getUser().getUserImg()}}" class="media-object" style="width:60px">
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading" th:text="${su.getUser().getUserName()}"></h4>
                                        <p style="font-size: 18px" th:text="${su.getSingInTime()}"></p>
                                        <span style="color: red; font-size: 18px">未签到</span>
                                    </div>
                                </div>
                                <div class="text-center" style="font-size: 24px; color:#7c7c7c; margin-top: 40px; margin-bottom: 40px;" th:if="${notSingInStu == 0}">
                                    课程内学生已全部签到!
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
    let page = 0;
    $(function () {
        $('#myTab li:eq('+page+') a').tab('show');
    });
</script>
</body>
</html>